<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <link crossorigin="anonymous" integrity="sha384-9GKi7Mg3e8wxMnh60bnNnc9kuwGfarF0StF1UbfPt4F5GMVfxBgfh8/pW4iHavxG" href="https://lib.baomitu.com/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
    <script crossorigin="anonymous" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"></script>
    <script crossorigin="anonymous" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" src="https://lib.baomitu.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

    <!--v-if特点每次都会重新删除或创建元素，性能上比价浪费 &#45;&#45;切换性能消耗-->
    <!--v-show特点不会重新创建或删除，而是切换元素的display:none样式 &#45;&#45;初始渲染消耗-->
    <!--这里使用flag就不需要this.了-->
    <div id="app">
        <input type="button" value="切换显示状态" @click="flag=!flag">
        <h3 v-if="flag">这是v-if控制的元素</h3>
        <h3 v-show="flag">这是v-show控制的元素</h3>
    </div>

    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                flag: true
            },
            methods:{

            }
        })

    </script>

</body>
</html>